<template>
	<view class="content">
		<view class="content-top">
			<view class="order-type">
				<view class="types">
					<image src="/static/home/icon/daiqueren.png"></image>
					待付款
				</view>
			</view>
			<!-- 收货人信息 -->
			<view class='add_title_item'>
				<view class="cell-bd-user">
					<view class="cell-bd-text-right">邓世杰：15065542147</view>
					<view class="default_">默认</view>
					<view class="company">公司</view>
				</view>
				<view class="address">
					广东省 广州市 白云区 三元里
				</view>
			</view>
			<!-- 订单地址 -->
			<view class="order-adress" @tap="logisDetails">
				<view class="order-adress-text">
					<view class="adress-text">
						<image></image>
						<view>您的订单已到达【广州天河分拣中心】</view>
					</view>
					<view class="date-time">2019-09-02 09:21:20</view>
				</view>
				<view class="arrows">
					<image src="/static/home/icon/arrows.png"></image>
				</view>
			</view>
			<!-- 商品列表信息 -->
			<view class='img-list'>
				<view class='img-list-item'  v-for="item in orderInfo.items" :key="item.id">
					<image class='img-list-item-l' :src='item.image_url' mode='aspectFill'></image>
					<view class='img-list-item-r'>
						<view class='little-right-t'>
							<view class='goods-name list-goods-name' @click="goodsDetail(item.goods_id)" v-if="orderInfo.order_type == 1">{{ item.name || ''}}</view>
						</view>
						<view class="speci">
							<view class="spec-ml">500ml</view>
							<view class="spec-omit">省3.99</view>
						</view>
						<view class="goods-speci">
							<view class="goods-price-speci">
								<view class='goods-price'>￥{{ item.price }}</view>
								<view class="line-price">￥49.0</view>
							</view>
							<view class="goods-num">X1</view>
						</view>
					</view>
				</view>
				<view class="order-infor">
					<view class="order-title">支付金额</view>
					<view class="order-address">
						<view class="num-goods">共计1件商品</view>
						<view class="text">总计：</view>
						<view class="price_num">
							￥
							<view>120.0</view>
						</view>
					</view>
				</view>
			</view>
		
			<!-- 订单编号 下单时间  支付方式 -->
			<view class="order-label">
				<view>
					<view>订单编号：</view>
					<view class="order-value">201712201507</view>
				</view>
				<view>
					<view>下单时间：</view>
					<view  class="order-value">2017-12-20 15:04:21</view>
				</view>
				<view>
					<view>支付方式：</view>
					<view  class="order-value">分期值</view>
				</view>
			</view>
		</view>
		<view class="button-bottom">
			<view class="button-bottom-c">
				<view class="button-bottom-c-t">实付金额：</view>
				<view class="button-bottom-c-b">￥
					<view class="red-price">660.0</view>
				</view>
				<view class="mian">（免运费）</view>
			</view>
			<!-- form-type="submit" -->
			<button hover-class="btn-hover2">确定下单</button>
		</view>
		<view class="button-bottom">
			<view class="button-bottom-s">
				退货退款
			</view>
			<!-- form-type="submit" -->
			<button hover-class="btn-hover2">一键转卖</button>
		</view>
	</view>
</template>

<script>
	import {
		orders,
		goods,
		tools
	} from '@/config/mixins.js'
	export default {
		mixins: [orders, goods,tools],
		data() {
			return {
				orderId: 0,
				orderInfo: {}, // 订单详情
				teamInfo: [], //拼团团信息
				lading: {
					status: false,
					code: ''
				}, //提货信息
			}
		},
		onLoad(options) {
			this.orderId = options.order_id
			if (this.orderId) {
				//this.orderDetail()
			} else {
				this.$common.errorToShow('', () => {
					uni.navigateBack({
						delta: 1,
					})
				})
			}
		},
		onShow() {
			this.orderDetail();
		},
		computed: {
			// 判断是否发货
			isDelivery() {
				if (this.orderInfo && this.orderInfo.delivery && Object.keys(this.orderInfo.delivery).length) {
					return true
				} else {
					return false
				}
			}
		},
		methods: {
			logisDetails(){
				uni.navigateTo({
					url:'./express_delivery'
				})
			},
			// 获取订单详情
			orderDetail() {
				let _this = this
				let data = {
					order_id: _this.orderId
				}
				_this.$api.orderDetail(data, function(res) {
					if (res.status) {
						let data = res.data
						// 订单状态文字转化
						switch (data.status) {
							case 1:
                                if (data.pay_status === 1) {
                                	_this.$set(data, 'status_name', '待付款')
                                } else if (data.pay_status >= 2 && data.ship_status === 1){
                                	_this.$set(data, 'status_name', '待发货')
                                } else if (data.pay_status >= 2 && data.ship_status === 2){
                                	_this.$set(data, 'status_name', '部分发货')
                                } else if (data.pay_status >= 2 && data.ship_status >= 3 && data.confirm === 1) {
                                	_this.$set(data, 'status_name', '已发货')
                                } else if (data.pay_status >= 2 && data.ship_status >= 3 && data.confirm >= 2 && data.is_comment === 1) {
                                	_this.$set(data, 'status_name', '待评价')
                                } else if (data.pay_status >= 2 && data.ship_status >= 3 && data.confirm >= 2 && data.is_comment >= 2) {
                                	_this.$set(data, 'status_name', '已评价')
                                }
								break
							case 2:
								_this.$set(data, 'status_name', data.text_status)
								break
							case 3:
								_this.$set(data, 'status_name', data.text_status)
								break
						}
						// 订单时间转换
						data.ctime = _this.$common.timeToDate(data.ctime)

						// 支付时间转换
						if (data.payment_time !== null) {
							data.payment_time = _this.$common.timeToDate(data.payment_time)
						}

						_this.orderInfo = data;
						
						_this.orderInfo.delivery.forEach(item=>{
							item.ctime=_this.$common.timeToDate(item.ctime)
						})
						
						if(data.ladingItem[0]){
							_this.lading = {
								status: true,
								code: data.ladingItem[0].id
							}
						}
					} else {
						_this.$common.errorToShow(res.msg)
					}
				})
			},
			// 取消订单
			cancelOrder(orderId) {
				this.$common.modelShow('提示', '确认要取消订单吗?', () => {
					let data = {
						order_ids: orderId
					}

					this.$api.cancelOrder(data, res => {
						if (res.status) {
							this.$common.successToShow(res.msg, () => {
								this.orderDetail()
							})
						} else {
							this.$common.errorToShow(res.msg)
						}
					})
				})
			},
			// 确认收货
			tackDeliery(orderId) {
				this.$common.modelShow('提示', '确认收货操作吗?', () => {
					let data = {
						order_id: orderId
					}
					this.$api.confirmOrder(data, res => {
						if (res.status) {
							this.$common.successToShow('确认收货成功', () => {
								// 更改订单列表页的订单状态
								let pages = getCurrentPages(); // 当前页
								let beforePage = pages[pages.length - 2]; // 上个页面
								if (beforePage !== undefined && beforePage.route === 'pages/member/order/orderlist') {
									// #ifdef MP-WEIXIN
									beforePage.$vm.isReload = true
									// #endif

									// #ifdef H5 || APP-PLUS || APP-PLUS-NVUE
									beforePage.isReload = true
									// #endif

									// #ifdef MP-ALIPAY || MP-TOUTIAO
									this.$db.set('order_user_ship', true, true);
									// #endif
								}

								this.orderDetail()
							})
						} else {
							this.$common.errorToShow(res.msg)
						}
					})
				})
			},
			//快递信息
			logistics(key) {
				let address1 = this.orderInfo.ship_area_name ? this.orderInfo.ship_area_name : ''
				let address2 = this.orderInfo.ship_address ? this.orderInfo.ship_address : ''
				let address = address1 + address2
				this.showExpress(this.orderInfo.delivery[key].logi_code, this.orderInfo.delivery[key].logi_no, address)
			},
		}
	}
</script>

<style lang="less">
	.order-type {
		width:686rpx;
		height:80rpx;
		margin:32rpx auto 0 auto;
		text-align:center;
		background:linear-gradient(135deg,rgba(255,94,77,1) 0%,rgba(255,127,64,1) 100%);
		border-radius:16rpx;
		font-size:32rpx;
		font-family:PingFangSC-Medium,PingFang SC;
		font-weight:500;
		color:rgba(255,255,255,1);
		line-height:80rpx;
		.types {
			display:flex;
			margin:auto;
			padding-left:264rpx;
			image{
				margin-top:20rpx;
				width: 40rpx;
				height: 40rpx;
			}
		}
	}
	.add_title_item {
		width:686rpx;
		height:172rpx;
		background:rgba(255,255,255,1);
		border-radius:16rpx;
		margin:24rpx auto 0 auto;
		.cell-bd-user {
			padding:24rpx 0 0 32rpx;
			display:flex;
			font-size:28rpx;
			font-family:PingFangSC-Medium,PingFang SC;
			.cell-bd-text {
				font-weight:500;
				color:rgba(51,51,51,1);
				line-height:28rpx;
			}
			.cell-bd-text-right {
				line-height:28rpx;
			}
			.default_ {
				margin-left:32rpx;
				width:68rpx;
				height:28rpx;
				text-align:center;
				line-height:30rpx;
				font-size:16rpx;
				font-family:PingFangSC-Medium,PingFang SC;
				font-weight:500;
				color:rgba(255,255,255,1);
				background:rgba(255,94,77,1);
				border-radius:40rpx;
			}
			.company {
				margin-left:12rpx;
				width:68rpx;
				height:28rpx;
				text-align:center;
				line-height:30rpx;
				font-family:PingFangSC-Medium,PingFang SC;
				color:rgba(255,255,255,1);
				border-radius:40rpx;
				background:rgba(91,76,255,1);
				font-size:16rpx;
			}
		}
		.address {
			position:relative;
			margin:8rpx 0 0 0rpx;
			display:flex;
			justify-content: space-between;
			color:rgba(128,128,128,1);
			width:90%;
			padding-left:32rpx;
			font-size:24rpx;
			font-family:PingFangSC-Regular,PingFang SC;
			font-weight:400;
			.cell-item-ft {
				position:absolute;
				top:-10rpx;
				right:0;
				margin-bottom:10rpx;
				image {
				}
			}
		}
    }	
	// 商品图片 支付金额
	.img-list {
		max-height:418rpx;
		border-radius: 16rpx;
		background-color: #FFFFFF;
		width: 686rpx;
		margin:22rpx auto 20rpx auto;
		padding:24rpx 32rpx 0rpx 32rpx;
		.img-list-item {
			border-bottom:1px solid rgba(245,245,245,1);
		}
		.order-infor {
			padding-top:34rpx;
			padding-bottom:22rpx;
			display:flex;
			justify-content: space-between;
			border-bottom:1px solid rgba(245,245,245,1);
			.order-title {
				line-height:-20rpx;
				font-size:28rpx;
				font-family:PingFangSC-Medium,PingFang SC;
				font-weight:500;
				color:rgba(51,51,51,1);
			}
			.order-address {
				display:flex;
				font-size:24rpx;
				font-family:PingFangSC-Regular,PingFang SC;
				font-weight:400;
				color:rgba(51,51,51,1);
				.num-goods {
				}
				.text {
					margin-left:25rpx;
				}
				.price_num {
					display:flex;
					font-size:24rpx;
					font-family:PingFangSC-Medium,PingFang SC;
					font-weight:500;
					color:rgba(255,94,77,1);
					line-height:36rpx;
					view {
						font-size:40rpx;
						font-weight:500;
						color:rgba(255,94,77,1);
						line-height:28rpx;
					}
				}
			}
		}
		.img-list-item {
			display:flex;
			max-height: 232rpx;
			justify-content: space-between;
			.img-list-item-l {
				width: 176rpx;
				height: 176rpx;
				margin-left:-20rpx;
			}
			.img-list-item-r {
				padding:0;
				.little-right-t {
					.goods-name {
						font-size:26rpx;
						font-family:PingFangSC-Regular,PingFang SC;
						font-weight:400;
						color:rgba(51,51,51,1);
					}
				}
				.speci {
					display:flex;
					justify-content: space-between;
					font-size:20rpx;
					padding:14rpx 0rpx 0 0 ;
					.spec-ml {
						width:82rpx;
						height:36rpx;
						background:rgba(245,245,245,1);
						border-radius:4px;
						font-family:PingFangSC-Regular,PingFang SC;
						font-weight:400;
						color:rgba(179,179,179,1);
						text-align:center;
						line-height:36rpx;
	
					}
					.spec-omit {
						font-family:PingFangSC-Medium,PingFang SC;
						font-weight:500;
						color:rgba(91,76,255,1);
						line-height:36rpx;
					}
				}
				.goods-speci {
					display:flex;
					justify-content: space-between;
					padding-top:20rpx;
					.goods-price-speci {
						display: flex;
						.goods-price {
							font-size:28rpx;
							font-family:PingFangSC-Medium,PingFang SC;
							font-weight:500;
							color:rgba(255,94,76,1);
						}
						.line-price {
							font-size:22rpx;
							font-family:PingFangSC-Regular,PingFang SC;
							font-weight:400;
							color:rgba(179,179,179,1);
							line-height:44rpx;
							margin-left:-38rpx;
							text-decoration:line-through;
						}
					}
					.goods-num {
						font-size:22rpx;
						font-family:PingFangSC-Regular,PingFang SC;
						font-weight:400;
						color:rgba(51,51,51,1);
						margin-right:-20rpx;
						line-height:44rpx;
					}
				}
			}
		}
	}
	// 订单地址
	.order-adress {
		width:686rpx;
		height:124rpx;
		margin:24rpx auto 0 auto;
		padding-top:24rpx;
		padding-left:33rpx;
		background:rgba(255,255,255,1);
		border-radius:16rpx;
		display:flex;
		justify-content: space-between;
		.order-adress-text {
			.adress-text {
				display:flex;
				image {
					width: 32rpx;
					height: 28rpx;
					background-color: red;
				}
				view {
					margin-left:16rpx;
					font-size:26rpx;
					font-family:PingFangSC-Medium,PingFang SC;
					font-weight:500;
					color:rgba(51,51,51,1);
				}
			}
			.date-time {
				margin-top:7rpx;
				padding-left:46rpx;
				font-size:22rpx;
				font-family:PingFangSC-Regular,PingFang SC;
				font-weight:400;
				color:rgba(179,179,179,1);
			}
		}
		.arrows {
			width: 48rpx;
			height: 48rpx;
			margin:14rpx 16rpx 0 0;
			image {
				width: 48rpx;
				height: 48rpx;
			}
		}
	}
	// <!-- 订单编号 下单时间  支付方式 -->
	.order-label {
		width:686rpx;
		max-height:204rpx;
		background:rgba(255,255,255,1);
		border-radius:16rpx;
		padding-bottom:23rpx;
		margin:24rpx auto 0 auto;
		view {
			
			font-size:26rpx;
			font-family:PingFangSC-Regular,PingFang SC;
			font-weight:400;
			color:rgba(128,128,128,1);
			display:flex;
			view{
				margin:24rpx 0 0 32rpx;	
			}
			.order-value {
				margin-left:16rpx;
				font-weight:400;
				color:rgba(51,51,51,1);
			}
		}
	}
	// end
	.cell-group {
		margin-bottom: 20upx;
	}

	.cell-bd-view {
		margin-bottom: 8upx;
	}

	.cell-bd-view .cell-bd-text {
		font-size: 22upx;
		color: #999;
	}

	.black-text .cell-bd-text {
		font-size: 28upx;
		color: #333;
	}
	.button-bottom {
		height: 100rpx;
		padding-left:32rpx;
		display:flex;
		justify-content: space-between;
		button{
			width:192rpx;
			height:68rpx;
			line-height: 68rpx;
			text-align: center;
			background:rgba(255,94,77,1);
			border-radius:8rpx;
			margin:auto 32rpx auto 0;
			font-size:28rpx;
			font-family:PingFangSC-Medium,PingFang SC;
			font-weight:500;
			color:rgba(255,255,255,1);
		}
		.button-bottom-c{
			height: 100%;
			display: flex;
			line-height: 100rpx;
			
		}
		.button-bottom-s {
			font-size:28rpx;
			font-family:PingFangSC-Medium,PingFang SC;
			font-weight:500;
			color:rgba(109,114,120,1);
			margin-top:30rpx;
		}
		.button-bottom-c-t{
			font-size:24rpx;
			font-family:PingFangSC-Medium,PingFang SC;
			font-weight:500;
			color:rgba(51,51,51,1);
		}
		.button-bottom-c-b{
			padding-top:12rpx;
			display: flex;
			font-size: 26upx;
			color: #333;
			height: 100%;
			color:rgba(255,94,77,1);
			line-height: 78rpx;
			.red-price{
				font-size:40rpx;
				font-family:PingFangSC-Medium,PingFang SC;
				font-weight:500;
				line-height: 70rpx;
			}
		}
		.mian{
			padding-top:36rpx;
			font-size:20rpx;
			font-family:PingFangSC-Regular,PingFang SC;
			font-weight:400;
			color:rgba(179,179,179,1);
			line-height:28rpx;
		}
	}

	// .button-bottom {
	// 	padding: 15upx 26upx;
	// 	text-align: right;
	// 	display: block;
	// }

	.button-bottom .btn {
		margin-left: 20upx;
	}

	.order-price {
		padding: 10upx 0 20upx;
	}

	.order-price .cell-item {
		border-bottom: none;
		padding-bottom: 0;
		padding-top: 0;
		min-height: 40upx;
	}

	.order-price .cell-bd-view {
		margin-bottom: 0;
	}

	.order-offer .cell-item-hd {
		vertical-align: top;
		padding-top: 8upx;
	}

	.order-offer .cell-item-bd {
		padding: 0;
	}

	.order-promotion {
		font-size: 24upx;
		color: #fff;
		background-color: #ff7159;
		margin: 0 0 4upx 6upx;
		padding: 2upx 10upx;
		display: inline-block;
		float: right;
	}

	.tax_name {}

	.tax_code {}

	.user-head-img-c {
		position: relative;
		width: 80upx;
		height: 80upx;
		border-radius: 50%;
		margin-right: 20upx;
		box-sizing: border-box;
		display: inline-block;
		float: left;
		border: 1px solid #f3f3f3;
	}

	.user-head-img-tip {
		position: absolute;
		top: -6upx;
		left: -10upx;
		display: inline-block;
		background-color: #FF7159;
		color: #fff;
		font-size: 22upx;
		z-index: 99;
		padding: 0 10upx;
		border-radius: 10upx;
		transform: scale(.8);
	}

	.group-swiper .cell-item .user-head-img {
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}

	.group-swiper .cell-item .user-head-img-c:first-child {
		border: 1px solid #FF7159;
	}

	.uhihn {
		width: 80upx;
		height: 80upx;
		border-radius: 50%;
		margin-right: 20upx;
		display: inline-block;
		border: 2upx dashed #e1e1e1;
		text-align: center;
		line-height: 80upx;
		color: #d1d1d1;
		font-size: 40upx;
		box-sizing: border-box;
	}

	.group-swiper .cell-item .cell-item-ft .btn {
		font-size: 26upx;
		color: #fff;
		background-color: #FF7159;
		/* padding: 0; */
		text-align: center;
	}
	
	.add-title-item .cell-item-hd {
	    min-width: 20px;
	    color: #666;
	    font-size: 14px;
	}
	
	.add-title-item .cell-item-bd{
		margin-left: 0;
	}
	
	.delivery{
		border-bottom: 1px solid #f3f3f3;
	}
	.th .cell-item-bd{
		display: block;
		flex: 1;
		margin-left: 20rpx;
		padding-right: 0;
	}
</style>
